<template>
    <div class="treeTable">

        <!-- 表头 -->
        <div class="thead">
            <ul>
                <li v-for="item in resourceThead" :key="item.id">{{item}}</li>
            </ul>
        </div>
        <!-- 内容 -->
        <ul class="tbody" v-for="itemTr in resourceData" :key="itemTr.id">
            <li>
                <div class="father" data-grade="1" ><!-- 一级节点 -->
                    <span>{{itemTr.resourceName}}</span>
                    <span>{{itemTr.type}}</span>
                    <span :title="itemTr.url">{{itemTr.url}}</span>
                    <span :title="itemTr.permission">{{itemTr.permission}}</span>
                    <span>{{itemTr.priority}}</span>
                    <span>
                        <a href="javascript:void(0);" class="icon iconfont icon-tianjiacaidan" :class="itemTr.type == 'menu'?'':'is-disabled'" title="增加下级菜单" @click="addLayer('menuMaintain',itemTr.id,'menu',$event)"></a>
                        <a href="javascript:void(0);" class="icon iconfont icon-tianjiaanniu" itle="增加下级按钮" @click="addLayer('resourcesMaintain',itemTr.id,'button',$event)"></a>
                        <a href="javascript:void(0);" class="icon-edit edit" title="编辑同级菜单" v-show="itemTr.type == 'menu'" @click="editLayer('menuMaintain',itemTr)"></a>
                        <a href="javascript:void(0);" class="icon iconfont icon-xiugaianniu" title="编辑同级按钮" v-show="itemTr.type == 'button'" @click="editLayer('resourcesMaintain',itemTr)"></a>
                        <a href="javascript:void(0);" class="icon-del del" @click="delLayer('del',itemTr.id,itemTr.child)"></a>
                    <!-- {{itemTr.handle}} -->
                    </span>
                </div>
                <ul style="display:none">
                    <li v-for="itemCh1 in itemTr.child" :key="itemCh1.id" class="child1" :class="itemCh1.child != undefined ? '' : 'leaf' ">
                        <div class="child1_f" data-grade="2"><!-- 二级节点 -->
                            <span v-bind:class='{curDef:itemCh1.child==null}'>{{itemCh1.resourceName}}</span>
                            <span>{{itemCh1.type}}</span>
                            <span :title="itemCh1.url">{{itemCh1.url}}</span>
                            <span :title="itemCh1.permission">{{itemCh1.permission}}</span>
                            <span>{{itemCh1.priority}}</span>
                            <span>
                                <a href="javascript:void(0);" class="icon iconfont icon-tianjiacaidan" :class="itemCh1.type == 'menu'?'':'is-disabled'" title="增加下级菜单" @click="addLayer('menuMaintain',itemCh1.id,'menu',$event)"></a>
                                <a href="javascript:void(0);" class="icon iconfont icon-tianjiaanniu" title="增加下级按钮" @click="addLayer('resourcesMaintain',itemCh1.id,'button',$event)"></a>
                                <a href="javascript:void(0);" class="icon-edit edit" title="编辑同级菜单" v-show="itemCh1.type == 'menu'" @click="editLayer('menuMaintain',itemCh1)"></a>
                                <a href="javascript:void(0);" class="icon iconfont icon-xiugaianniu" title="编辑同级按钮" v-show="itemCh1.type == 'button'" @click="editLayer('resourcesMaintain',itemCh1)"></a>
                                <a href="javascript:void(0);" class="icon-del del" @click="delLayer('del',itemCh1.id,itemCh1.child)"></a>
                            </span>
                        </div>
                        <ul style="display:none">
                            <li v-for="itemCh2 in itemCh1.child" :key="itemCh2.id" class="child2" :class="itemCh2.child != undefined ? '' : 'leaf' ">
                                <div class="child2_f" data-grade="3"><!-- 三级节点 -->
                                    <span>{{itemCh2.resourceName}}</span>
                                    <span>{{itemCh2.type}}</span>
                                    <span :title="itemCh2.url">{{itemCh2.url}}</span>
                                    <span :title="itemCh2.permission">{{itemCh2.permission}}</span>
                                    <span>{{itemCh2.priority}}</span>
                                    <span>
                                        <a href="javascript:void(0);" class="icon iconfont icon-tianjiacaidan" :class="itemCh2.type == 'menu'?'':'is-disabled'" title="增加下级菜单" @click="addLayer('menuMaintain',itemCh2.id,'menu',$event)"></a>
                                        <a href="javascript:void(0);" class="icon iconfont icon-tianjiaanniu" title="增加下级按钮" @click="addLayer('resourcesMaintain',itemCh2.id,'button',$event)"></a>
                                        <a href="javascript:void(0);" class="icon-edit edit" title="编辑同级菜单" v-show="itemCh2.type == 'menu'" @click="editLayer('menuMaintain',itemCh2)"></a>
                                        <a href="javascript:void(0);" class="icon iconfont icon-xiugaianniu" title="编辑同级按钮" v-show="itemCh2.type == 'button'" @click="editLayer('resourcesMaintain',itemCh2)"></a>
                                        <a href="javascript:void(0);" class="icon-del del" @click="delLayer('del',itemCh2.id,itemCh2.child)"></a>
                                    </span>
                                </div>
                                <ul style="display:none">
                                    <li v-for="itemCh3 in itemCh2.child" :key="itemCh3.id" class="child3" :class="itemCh3.child != undefined ? '' : 'leaf' ">
                                        <div class="child3_f" data-grade="3"><!-- 三级节点 -->
                                            <span>{{itemCh3.resourceName}}</span>
                                            <span>{{itemCh3.type}}</span>
                                            <span :title="itemCh3.url">{{itemCh3.url}}</span>
                                            <span :title="itemCh3.permission">{{itemCh3.permission}}</span>
                                            <span>{{itemCh3.priority}}</span>
                                            <span>
                                                <a href="javascript:void(0);" class="icon iconfont icon-tianjiacaidan curDef" title="增加下级菜单"></a>
                                                <a href="javascript:void(0);" class="icon iconfont icon-tianjiaanniu curDef" title="增加下级按钮" ></a>
                                                <a href="javascript:void(0);" class="icon iconfont icon-xiugaianniu" title="编辑同级按钮" @click="editLayer('resourcesMaintain',itemCh3)"></a>
                                                <a href="javascript:void(0);" class="icon-del del" @click="delLayer('del',itemCh3.id,itemCh3.child)"></a>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['resourceData'],
    data () {
        return {
            resourceThead:[
                "资源名称","资源类型","url","权限","排序号","操作"
            ]
        }
    },
    created(){},
    mounted() {
        $(".treeTable").delegate(".father span:nth-child(1),.child1_f span:nth-child(1),.child2_f span:nth-child(1)","click",function(){
           $(this).parent().toggleClass("cur").siblings('').slideToggle()
        });

    },
    methods: {
        // 删除角色
        deleteRole(id,types){
            console.log("this");
            console.log(this);
            this.$emit('del',[id,types]);
        },
        // 增加
        addLayer(typesLayer,Id,addtypes,event){
            if(!$(event.currentTarget).hasClass("is-disabled")){
                this.$emit('addLayer',[typesLayer,Id,addtypes]);
            }else{
                this.$message({
                        duration:1000,
                        message: "当前级为button，不可添加下级菜单。",
                        center: true,
                        type:'error'
                    });
            }
        },
        // 编辑
        editLayer(typesLayer,obj){
            this.$emit('editLayer',[typesLayer,obj]);
        },
        //删除
        delLayer(typesLayer,Id,child){
            if(!child){
                this.$emit('delLayer',[typesLayer,Id,false]);
            }else{
                this.$emit('delLayer',[typesLayer,Id,true]);
            }
        }
    }

}



</script>

<style scoped>
    table,tbody{
        width: 100%;
    }
    .treeTable{
        width: 100%;
        border: 1px solid #dadada;
    }
    .thead>ul{
        overflow: hidden;
    }
    .thead>ul>li{
        float: left;
        font-weight: bold;
        height: 36px;
        line-height: 36px;
        color: #666666;
        text-align: center;
        border-right: 1px solid #dadada;
    }
    .tbody {
        /* border-top: 1px solid #dadada; */
    }
    .tbody li,.tbody div{
        overflow: hidden;
    }
    .tbody span{
        float: left;
        height: 36px;
        padding-left:5px;
        line-height: 36px;
        border-right: 1px solid #dadada;
        border-top: 1px solid #dadada;
        text-align: center;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .tbody .father,.tbody .child1_f,.tbody .child2_f{
        background: url('../../../static/img/treeTable1.png') no-repeat 8px center;
    }
    .tbody .father.cur,.tbody .child1_f.cur,.tbody .child2_f.cur{
        background: url('../../../static/img/treeTable2.png') no-repeat 8px center;
    }
    .tbody .child1_f,.tbody .child1_f.cur{
        background-position: 24px center;
    }
    .tbody .child2_f,.tbody .child2_f.cur{
        background-position: 48px center;
    }
    .tbody .leaf .child1_f,.tbody .leaf .child2_f{
        background: none;
    }
    .tbody .father span:nth-child(1){
        padding-left: 45px;
        text-align: left;
        background: url('../../../static/img/wjJ0.gif') no-repeat 24px center;
        cursor: pointer;
    }
    .tbody .child1 span:nth-child(1),.tbody .child2 span:nth-child(1){
        padding-left: 60px;
        text-align: left;
        background: url('../../../static/img/wjJ0.gif') no-repeat 42px center;
        /* background: url('../../../static/img/treeTable3.png') no-repeat 42px center; */
        cursor: pointer;
    }
    .tbody .child1.leaf .child2 span:nth-child(1),.tbody .child2 span:nth-child(1),.tbody .child1.leaf .child3 span:nth-child(1){
        padding-left: 80px;
        text-align: left;
        background: url('../../../static/img/treeTable3.png') no-repeat 60px center;
        cursor: default;
    }
    .tbody .child1.leaf span:nth-child(1){
        background: url('../../../static/img/treeTable3.png') no-repeat 42px center;
    }
    .tbody .child2.leaf span:nth-child(1){
        background: url('../../../static/img/treeTable3.png') no-repeat 60px center;
    }
    .tbody .child3.leaf span:nth-child(1){
        background: url('../../../static/img/treeTable3.png') no-repeat 80px center;
        cursor: default;
    }
    .tbody .child2 span:nth-child(1){
        padding-left: 81px;
        text-align: left;
        background: url('../../../static/img/wjJ0.gif') no-repeat 63px center;
        /* background-position: 75px center; */
    }
    .tbody .child3 span:nth-child(1){
        padding-left: 98px;
        text-align: left;
        background: url('../../../static/img/wjJ0.gif') no-repeat 63px center;
        /* background-position: 75px center; */
    }


    .tbody .father.cur span:nth-child(1){
        background-image: url('../../../static/img/wjJ.jpg');
    }
    .thead>ul>li:nth-child(1),.tbody span:nth-child(1){
        width: 20%;
    }
    .thead>ul>li:nth-child(2),.tbody span:nth-child(2){
        width: 10%;
    }
    .thead>ul>li:nth-child(3),.tbody span:nth-child(3){
        width: 20%;
    }
    .thead>ul>li:nth-child(4),.tbody span:nth-child(4){
        width: 15%;
    }
    .thead>ul>li:nth-child(5),.tbody span:nth-child(5){
        width: 10%;
    }
    .thead>ul>li:nth-child(6),.tbody span:nth-child(6){
        width: 25%;
        border-right: none;
    }
    .tbody span:nth-child(3),.tbody span:nth-child(4){
        text-align: left;
    }
    .tbody span a{
        margin: 0 3px;
        font-size: 14px;
        color: #24afaf;
    }
    .tbody span a.is-disabled{
        color: #b4bccc;
        cursor: default;
    }
    .tbody span a.del{
        color:#FF0505;
    }
</style>
